<template>
  <div>
    <el-table :data="roleList" stripe border style="width:901px">
      <el-table-column prop="id" label="id" width="200px"></el-table-column>
      <el-table-column prop="roleName" label="角色名"  width="350px"></el-table-column>
      <el-table-column label="操作"  width="350px">
        <template slot-scope="scope">
            <el-button
            type="success"
            icon="el-icon-check"
            circle
            plain
            size="mini"
            @click="showPerm(scope.row.id)"
            >分配权限</el-button
          >

          <!-- <el-popover 
          trigger="click"
          placement="right-end"
          >

            <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            ref="tree"
            :props="defaultProps"
            >
          </el-tree>
             
            <el-button type="primary" icon="el-icon-edit" @click="showPerm(scope.row.id)"  slot="reference"></el-button>
          </el-popover> -->
          
        


        </template>
      </el-table-column>
    
    </el-table>


    <!--分配权限对话框-->
     <el-dialog title="分配权限" :visible.sync="AssignPremDialog">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        ref="tree"
        :props="defaultProps"
      >
      </el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="AssignPremDialog = false">取 消</el-button>
        <el-button type="primary" @click="rightsAssign">确 定</el-button>
      </div>
    </el-dialog>




      
  </div>
</template>

<script>

export default {
    data(){
        return{
        roleList:[],
        treeData:[],
          //分配权限用户
        roleId: 0,
        keys:[],
        defaultProps: {
        children: "children",
        label: "permName",
      },
      AssignPremDialog: false,
      }
    },
    methods:{


      //查所有的角色列表
      findRoleList(){
           this.axios.get("/role/list").then(res=>{
          if(res.data.code==200){
            this.roleList=res.data.data
          }else{
              this.$message({
                type:"erro",
                message:res.data.msg
              })
          }       
        })
      },

      //查角色对应的权限树
      showPerm(id) {
         this.AssignPremDialog = true;
      this.roleId = id;
      this.axios.get("/roleperm/tree",{
          params:{
            id:this.roleId
          },
    }).then(res=>{

                this.$refs.tree.setCheckedKeys([]);//取消所有勾线
                 let permids=res.data.data;//数组
                 console.log(permids);
                 permids.forEach((i,n) => {
                         
                      alert(i);
                      var node = this.$refs.tree.getNode(i);
                      console.log(node);
                      
                      
                       if(node.isLeaf){
                         this.$refs.tree.setChecked(node, true);
                       }
                });

      // console.log(res);
      // var kes = res.data.data;

      // this.$nextTick(()=>{
      //    this.$refs.tree.setCheckedKeys(kes);
      // })

    })
          //让某个用户原有的权限显示出来setCheckedKeys(keys) keys是数组（key ： id）
      // nextTick(回调函数)   当DOM渲染完之后，在去执行回调

    },

      //加载所有的权限
      findAllRights() {
        this.axios.get("/perms/all",).then(res=>{
          this.treeData=res.data.data
         

          // for(let i = 0;i<this.treeData.length;i++){
            
          //   for(let j = 0;j <this.treeData[i].children.length;j++ )
          //   console.log(this.treeData[i].children[j])
          // }
        })
      },

    //提交权限
    rightsAssign() {
        let key1 = this.$refs.tree.getHalfCheckedKeys();

        //获取选中个的节点
        let key2 = this.$refs.tree.getCheckedKeys();
        console.log(key1,key2);
        let key3 =  key1.concat(key2).join(",")
        console.log(key3);
        this.axios.get("/role/prem/assignRight",{
          params:{keys:key3,roleId:this.roleId},
        }).then(res=>{
          if(res.data.code == 200){
            this.$message({
                message: "授权成功",
                type: "success",
                duration: 800
            });
          }else{
             this.$message({
                message: "授权失败",
                type: "success",
                duration: 800
            });
          }

        })
        this.AssignPremDialog = false;

        //刷新页面
        this.findRoleList();

    },
    
    },
    created(){
      this.findRoleList();
      this.findAllRights();
    }
}


</script>

<style>
</style>
